<!--/* 导航栏 */-->
<nav
  xmlns:th="https://www.thymeleaf.org"
  class="nav"
>
  <div class="nav-title">
    <a class="link" th:text="${site.title}" href="/"></a>
  </div>
  <div class="nav-do">
    <!--/* 搜索 */-->
    <div class="controls" th:if="${pluginFinder.available('PluginSearchWidget')}">
      <a class="link" href="javascript:SearchWidget.open()" title="搜索">
        <i class="icon fas fa-search fa-fw"></i>
        <span class="name">搜索</span>
      </a>

      <!--/* 移动侧边栏按钮 */-->
      <a class="link bars" href="#">
        <i class="fas fa-bars fa-fw"></i>
      </a>
    </div>


    <!--/* 菜单 */-->
    <menu class="menu" th:with="menuItems = ${menuFinder.getPrimary().menuItems}">
      <th:block th:each="menuItem : ${menuItems}" th:with="isChildren = ${#lists.isEmpty(menuItem.children)} ">
        <li th:if="${isChildren}" class="menu-item">
          <a
            class="link"
            th:href="@{${menuItem.status.href}}"
            th:target="${menuItem.spec.target?.value}"
            th:with="icon = ${#annotations.getOrDefault(menuItem,'icon','')}"
          >
            <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>
            <span class="name" th:text="${menuItem.status.displayName}"></span>
          </a>
        </li>
        <!--/* 二级*/-->
        <li th:unless="${isChildren}" class="menu-item">
          <a
            class="link"
            onclick="event.preventDefault()"
            th:with="icon = ${#annotations.getOrDefault(menuItem, 'icon','')}"
          >
            <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>
            <span class="name" th:text="${menuItem.status.displayName}"></span>
            <i class="fas fa-chevron-down"></i>
          </a>

          <ul class="menu-children">
            <li th:each="children : ${menuItem.children}" class="menu-children--item">
              <a
                class="menu-children--link"
                th:href="@{${children.status.href}}"
                th:target="${children.spec.target?.value}"
                th:with="icon = ${#annotations.getOrDefault(children, 'icon','')}"
              >
                <i th:if="${!#strings.isEmpty(icon)}" th:class="${icon}"></i>
                <span class="name" th:text="${children.status.displayName}"></span>
              </a>
            </li>
          </ul>
        </li>
      </th:block>
    </menu>
  </div>
</nav>
